<script setup>
import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath, getStraightPath } from '@vue-flow/core'
import { computed } from 'vue'

const props = defineProps({
    sourceX: Number,
    sourceY: Number,
    targetX: Number,
    targetY: Number,
    sourcePosition: String,
    targetPosition: String,
    data: Object,
    style: Object
})

// 计算直线路径
const path = computed(() => {
    const [path, labelX, labelY] = getSmoothStepPath({
        sourceX: props.sourceX,
        sourceY: props.sourceY,
        targetX: props.targetX,
        targetY: props.targetY
    })

    return [path, labelX, labelY]
})

</script>

<template>
    <!-- 使用直线路径 -->
    <BaseEdge :path="path[0]" :style="{
        strokeWidth: 4,
        stroke: '#000000',
        ...style
    }" />

    <!-- 边缘标签渲染器 -->
    <!-- <EdgeLabelRenderer>
        <div :style="{
            pointerEvents: 'all',
            position: 'absolute',
            transform: `translate(0%, 0%) translate(${path[1]}px,${path[2]}px)`,
            fontSize: '12px',
        }" class="nodrag nopan">
            {{ data.left }}
        </div>
    </EdgeLabelRenderer>
    <EdgeLabelRenderer>
        <div :style="{
            pointerEvents: 'all',
            position: 'absolute',
            transform: `translate(-100%, -100%) translate(${path[1]}px,${path[2]}px)`,
            fontSize: '12px',
        }" class="nodrag nopan">
            {{ data.right }}
        </div>
    </EdgeLabelRenderer> -->
</template>